<template>
	<!-- 评价列表 -->
	<view>
		<view id="scrollBox" ref="scrollBox" class="scrll-box px-32">
			<view class="" v-for="item in reply" :key="item.id" @click.stop="details(item)">
				<view class="rd-16rpx">
					<view class="flex-1 p-24">
						<view class="flex-y-center">
							<image class="w-64 h-64 rd-50-p111-" :src="item.avatar" mode="aspectFill"></image>
							<view class="flex-col pl-16">
								<text class="text--w111-333 fs-24">{{ item.nickname }}</text>
								<view class="text--w111-aaa fs-20">
									{{item.add_time}}
									<!-- <text class="iconfont icon-ic_star1 fs-18 text-primary-con" v-for="star in Number(item.star)" :key="star"></text> -->
								</view>
							</view>
						</view>
						<view class="mt-12 text--w111-333 fs-26 break_word line2">{{ item.comment }}</view>
					</view>
					<view class="pics_view" v-if="item.pics.length">
						<image class="pics" :src="dataImg" v-for="(dataImg,dataIndex) in item.pics" :key="dataIndex">
						</image>
					</view>
					<!-- <image v-if="item.pics.length" class="pics" :src="item.pics[0]"></image> -->
				</view>
			</view>
		</view>
		<!-- <view class="flex-center mt-24" v-if="reply.length > 1">
			<view class="w-64 h-6 rd-3px bg--w111-eee scrpll-l">
				<view class="w-32 h-6 rd-3px scrpll-line" :style="{ left: srollLeft + '%' }"></view>
			</view>
		</view> -->
	</view>
</template>
<script>
	import {
		mapGetters
	} from 'vuex';
	import {
		getReplyPraise,
		getUnReplyPraise
	} from '@/api/store.js';
	export default {
		computed: mapGetters(['isLogin']),
		props: {
			reply: {
				type: Array,
				default: () => []
			},
			fromTo: {
				type: Number,
				default: 0
			}
		},
		data() {
			return {
				srollLeft: 0, // 距离左边
				srollBoxWidth: 0, //内部宽度
				boxWidth: 0 //容器宽度
			};
		},
		mounted() {
			this.$nextTick((e) => {
				this.srollLeft = 0;
				const query = wx.createSelectorQuery().in(this);
				query
					.select('.scrll-box')
					.boundingClientRect((res) => {
						this.srollBoxWidth = res.width;
					})
					.exec();
				query
					.select('.scroll')
					.boundingClientRect((res) => {
						this.boxWidth = res.width - 10;
					})
					.exec();
			});
		},
		methods: {
			scroll(e) {
				this.srollLeft = ((e.detail.scrollLeft / (this.srollBoxWidth - this.boxWidth)) * 100).toFixed(0) / 2;
			},
			details(item) {
				if (this.isLogin) {
					uni.navigateTo({
						url: '/pages/goods/goods_comment_con/comment_con?id=' + item.id
					});
				} else {
					this.$emit('changeLogin');
				}
			},
			getpreviewImage: function(indexw, indexn) {
				uni.previewImage({
					urls: this.reply[indexw].pics,
					current: this.reply[indexw].pics[indexn]
				});
			},
			praise(item, indexw) {
				if (this.isLogin) {
					if (item.is_praise) {
						getUnReplyPraise(item.id).then((res) => {
							item.is_praise = !item.is_praise;
							item.praise = item.praise - 1;
							this.$emit('replyFun', this.reply);
							return this.$util.Tips({
								title: res.msg
							});
						});
					} else {
						getReplyPraise(item.id).then((res) => {
							item.is_praise = !item.is_praise;
							item.praise = item.praise + 1;
							this.$emit('replyFun', this.reply);
							return this.$util.Tips({
								title: res.msg
							});
						});
					}
				} else {
					this.$emit('changeLogin');
				}
			}
		}
	};
</script>
<style lang="scss">
	.scrll-box {
		// display: flex;
		flex-wrap: nowrap;
		// width: max-content;
	}

	.scrpll-l {
		position: relative;
	}

	.scrpll-line {
		position: absolute;
		background-color: var(--view-theme);
		left: 0;
		top: 0;
	}

	.text-primary-con {
		color: var(--view-theme);
	}

	.pics_view {
		display: flex;
		flex-wrap: wrap;
		.pics {
			width: 156rpx;
			height: 156rpx;
			border-radius: 8rpx 8rpx 8rpx 8rpx;
			margin-right: 20rpx;
			&:nth-child(4n){
				margin-right: 0;
			}
		}
	}

	
</style>